<template>
  <div>
    <div class="tab">
      <button @click='handle(index)' v-for="(item, index) in listData" :key="item.id">{{item.title}}</button>
      <div
        :class="{active: currentIndex == index}"
        :key="item.id"
        v-for="(item, index) in listData"
      >{{item.content}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0,
      listData: [
        {
          id: 1,
          title: "apple",
          content: "苹果"
        },
        {
          id: 2,
          title: "orange",
          content: "橘子"
        },
        {
          id: 3,
          title: "banana",
          content: "香蕉"
        }
      ]
    };
  },
  methods: {
    handle (index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style scoped>
  .tab div {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    display: none;
  }
  .tab div.active {
    display: block;
  }
  .tab button {
    display: inline-block;
  }
</style>
